<template>
  <Card>
    <Spin fix v-if="loading.status">
      <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
      <div v-text="loading.text"></div>
    </Spin>
    <div slot="title">
      <Icon type="ios-people"></Icon>
      权限管理
      <div class="table-float">
        <Button type="primary" shape="circle" icon="plus" size="small" @click="add()"></Button>
      </div>
    </div>
    <Table border :columns="columns" :data="roles" :no-data-text="''">
    </Table>
  </Card>
</template>
<script>
  import role from '@/models/setting/sys/role'

  export default {
    data () {
      return {
        loading: {
          status: false,
          text: ''
        },
        columns: [
          {
            title: '角色名称',
            key: 'name',
            align: 'center'
          },
          {
            title: '状态',
            key: 'status',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', params.row.status ? '✔️' : '❎')
              ])
            }
          },
          {
            title: '权限列表',
            key: 'view',
            type: 'html',
            align: 'left'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.edit(params.row.id)
                    }
                  }
                }, '编辑')
              ])
            }
          }
        ],
        roles: []
      }
    },
    mounted () {
      this.initLoading()
      this.load()
    },
    methods: {
      load () {
        role.gets().then(r => {
          if (r.code === 200) {
            this.roles = r.roles
          } else {
            this.$Message.warning(r.msg)
          }
          this.showLoading(false)
        }).catch(r => {
        })
      },
      showLoading (status, text = '') {
        this.loading = {
          status: status,
          text: text
        }
      },
      initLoading () {
        this.loading = {
          status: true,
          text: '数据加载中...'
        }
      },
      add () {
        this.$modal.container(() => import('./add.vue'), (r) => {
          if (r.refresh) {
            this.refresh()
          }
        }, (r) => {
          if (r.refresh) {
            this.refresh()
          }
        }, {})
      },
      edit (id) {
        this.$modal.container(() => import('./edit.vue'), (r) => {
          if (r.refresh) {
            this.refresh()
          }
        }, (r) => {
          if (r.refresh) {
            this.refresh()
          }
        }, {
          id: id
        })
      },
      refresh () {
        this.menus = []
        this.load()
      }
    }
  }
</script>
